<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客详情页面</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
    <link rel="stylesheet" href="../static/css/typo.css" th:href="@{/css/typo.css}">
    <link rel="stylesheet" href="../static/lib/prism/prism.css" th:href="@{/lib/prism/prism.css}">
    <link rel="stylesheet" href="../static/lib/tocbot/tocbot.css" th:href="@{/lib/tocbot/tocbot.css}">
    <link rel="stylesheet" href="../static/css/mecss.css" th:href="@{/css/mecss.css}">
    <link rel="stylesheet" href="../static/newCss/animate.css" th:href="@{/newCss/animate.css}"/>
    <link rel="stylesheet" href="../static/newCss/layui.css" th:href="@{/newCss/layui.css}">
    <link rel="stylesheet" href="../static/newCss/semantic.css" th:href="@{/newCss/semantic.css}">
    <link rel="stylesheet" href="../static/newCss/Blog-nav.css" th:href="@{/newCss/Blog-nav.css}">
    <link rel="stylesheet" href="../static/newCss/MyStyle.css" th:href="@{/newCss/MyStyle.css}">
    <link rel="stylesheet" href="../static/css/typo.css" th:href="@{/css/typo.css}"/>
    <link rel="stylesheet" href="../static/lib/prism/prism.css" th:href="@{/lib/prism/prism.css}"/>
    <link rel="stylesheet" href="../static/lib/tocbot/tocbot.css" th:href="@{/lib/tocbot/tocbot.css}"/>
    <link rel="stylesheet" href="../static/newCss/blogStyle.css" th:href="@{/newCss/blogStyle.css}"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"/>
    <link rel="stylesheet" href="../static/newCss/APlayer.min.css" th:href="@{/newCss/APlayer.min.css}">
    <link rel="stylesheet" href="../static/css/blog-background.css" th:href="@{/css/blog-background.css}">
</head>

<body>
<!-- 导航 -->
<div class="ui top menu">
    <nav class="h-shadow-small ui attached segment h-padded-td-mini">
        <!-- 滚轮进度条 -->
        <div class="ui bottom indicating attached  progress" data-value="1" data-total="100" id="example4">
            <div class="bar"></div>
        </div>
        <div class="ui secondary stackable menu ">
            <h2 class="ui left header item">
                <div class="content"><span style="font-size: 20px">Meteor</span></div>
            </h2>
            <div class="item  h-item h-moblile-hide">
                <div class="ui item  category search">
                    <div class="ui  icon input">
                        <input class="prompt" type="text" placeholder="搜索文章" id="Search_for_articles">
                        <i class="search link icon" id="search_blog_btn"></i>
                    </div>
                    <div class="results"></div>
                </div>
            </div>

            <a th:href="@{/1}" href="#" class="h-item item h-moblile-hide Navbtn"><i class="home icon"></i>首页</a>

            <a th:href="@{/types}" href="#" class="h-item item h-moblile-hide  Navbtn"><i class="tags icon"></i>标签</a>

            <a th:href="@{/time}" href="#" class="h-item item h-moblile-hide  Navbtn"><i
                    class="calendar alternate icon"></i>归档</a>

            <a href="javascript:alert('开发中')" class="h-item item h-moblile-hide Navbtn"><i
                    class="linkify icon"></i>未知</a>

            <a th:href="@{/aboutMe}" class="h-item item h-moblile-hide  Navbtn"><i
                    class="address card outline icon"></i>关于我</a>

            <a th:href="@{/dream}" class="h-item item h-moblile-hide  Navbtn"><i
                    class="paper plane outline icon" th:classappend="${n==6} ? 'active'"></i>关于梦想</a>

            <!--            <a th:href="@{/toLogin}" class="h-item item h-moblile-hide  Navbtn"><i class="arrow circle right icon"></i>后台登录</a>-->

        </div>
        <a href="#" class="ui icon button h-right-top-storage h-moblile-show" id="stackable-hide"
           style="background-color: #ffffff;">
            <i class="sidebar icon"></i>
        </a>
    </nav>
</div>
<!--中间内容-->
<div class="m-container m-padded-tb-big">
    <div class="ui container d-web-info-box">
        <div class="ui top attached d-web-info-boxs">
            <!-- 头部 -->
            <div class="ui top attached">
                <div class="ui mini horizontal link list">
                    <div class="item">
                        <div class="content">
                            <span class="header"><i class="user outline red icon"></i>&nbsp;Meteor</span>
                        </div>
                    </div>
                    <div class="item" th:text="${blog.views}">
                        <i class="eye green icon"></i>&nbsp;3326
                    </div>
                    <div class="item" th:text="${blog.createTime}">
                        <i class="edit blue icon"></i>&nbsp;2022-06-29 18:11:17
                    </div>
                    <div class="item">
                        <i class="comment alternate outline orange icon"></i>&nbsp;4
                    </div>
                </div>
            </div>
        </div>
        <!-- 内容 -->
        <div class="ui attached padded">
            <div class="ui right aligned basic segment">
                <div class="ui orange basic label">原创</div>
            </div>
            <h2 th:text="${blog.title}" class="ui center aligned header">标题~~~~~~~~~~~~~</h2>
            <div id="content" class="typo js-toc-content typo-selection m-padded-lfrg-responsive m-padded-tb-large">
                <p th:utext="${blog.content}">人生嘛！说长不长，说短也不短。我很喜欢的一段话：“当你走进考场时，或许你每多拿的一分，都是为了遇见更好的自己；亦或许你失去的一分，其实是为了遇见更好的人。”人生中我们难免会遇见很多人，有些人我们可以成为知己，留了下来，而有些人或许成了过客。其实在我们交往的每一个人中，我们都能够从他身上吸取一些东西，无论好坏，毕竟上天为你关掉一扇窗的同时，也一定会为你开一扇门。

                    有些人的相遇，其实可能意味着迎来更好的自己。当你一次又一次的被人当成“傻子”时，其实也没什么大不了。因为既然你选择了想要拥有一颗善良、帮助人的心，就不必在意付出与回报，也不必在意世人的眼光。

                    就像这样一件事，我发现同学考试作弊，然后我把他举报了，他得到了学校的处理，但是班级的同学却一直在说我，也都不和我玩了，我回到家和爸爸说了这个事情，爸爸意味深长的说：”其实，你做的没有错，你看到不公平的事情选择了站出来！这是你精神的选择，但是同学们说你、不和你玩，也没有错，这是社会给你的选择。“错就错在了，你自己的身上，因为你想要拥有一颗正义的心的同时却又在意世人的眼光。正所谓鱼和熊掌不可兼得。

                    虽然这个社会没有对与错，只有强与弱。但是这个世上也并没有绝对的“正确”，因为任何一件事物的发生，都需要两个因素的摩擦而产生，一个事物并不会凭空的产生，所以每当我们在打游戏时还说，为什么会有这么菜的队友；在我们交往遇到摩擦时，为什么会有这么sb的人，遇到不顺跌倒时，为什么我这么倒霉，等等我们经常会产生的疑问，其实我们不如从自身出发，正所谓“你无法改变环境，你就只能改变自己”，“物竞天择、适者生存”。

                    我很喜欢出自《论语》中的一句话，“吾日三省吾身，为人谋而不终乎，与朋友交而不信乎，传不习乎。”只有经常反思自身，才能够得到进步，一味的怪罪其他事物，只不过是给自己的过错找了个合理的借口罢了！

                    2022年6月30日 晚 20：33 雷雨天气</p>
            </div>
            <!-- 标签 -->

            <!-- 赞赏 -->
            <div class="ui center aligned basic segment">
                <button id="payButton" class="ui basic orange circular button">赞赏</button>
            </div>
            <div class="ui pay flowing popup transition hidden">
                <div class="ui orange basic label">
                    <div class="ui images" style="font-size: 5px;">
                        <div class="image">
                            <img th:src="@{/image/pay.jpg}" alt="" class="ui rounded bordered image"
                                 style="width:120px">
                            <div>微信支付</div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!-- 博客信息 -->
        <div class="ui attached positive message">
            <div class="ui middle aligned grid">
                <div class="eleven wide column">
                    <ul class="list">
                        <li>作者：Meteor(联系作者)</li>
                        <li>发表时间：[[${blog.updateTime}]]</li>
                        <li>版权声明：自由转载-非商用-保持署名</li>
                    </ul>
                </div>
                <div class="five wide column">
                    <img th:src="@{/image/myvx.jpg}" alt="" class="ui rounded right floated bordered image"
                         style="width:110px">
                </div>
            </div>
        </div>
        <!-- 留言区域 -->
        <div class="ui bottom attached segment">
            <div id="comment-container" class="ui teal segment">
                <div th:fragment="commentList" class="commentList">
                    <div class="ui small comments">
                        <h3 class="ui dividing header">
                            <font style="vertical-align: inherit;">
                                <font style="vertical-align: inherit;">评论</font>
                            </font>
                        </h3>
                        <div class="comment" th:each="comment:${comments}">
                            <a class="avatar">
                                <img th:src="${comment.avatar}" src="../static/image/img.png">
                            </a>
                            <div class="content">
                                <a class="author">
                                    <font style="vertical-align: inherit;">
                                        <font th:text="${comment.nickname}" style="vertical-align: inherit;">马特</font>
                                    </font>
                                </a>
                                <div class="metadata">
                  <span class="date">
                    <font style="vertical-align: inherit;">
                      <font style="vertical-align: inherit;" th:text="${comment.createTime}">今天下午 5 点 42 分</font>
                    </font>
                  </span>
                                </div>
                                <div class="text">
                                    <font style="vertical-align: inherit;">
                                        <font th:text="${comment.content}" style="vertical-align: inherit;">
                                            多么艺术！
                                        </font>
                                    </font>
                                </div>
                                <div class="actions">
                                    <a class="reply">
                                        <font style="vertical-align: inherit;">
                                            <font onclick="reply(this)"
                                                  th:attr="data-commentid=${comment.id},data-commentnickname=${comment.nickname}"
                                                  data-commentid="1" data-commentnickname="Matt"
                                                  style="vertical-align: inherit;">回复</font>
                                        </font>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 提交留言区域 -->
            <div id="comment-form" class="ui form">
                <input type="hidden" name="blogId" th:value="${blog.id}">
                <input type="hidden" name="parentCommentId" th:value="-1">
                <div class="field">
                    <textarea name="content" placeholder="请输入评论信息..."></textarea>
                </div>
                <div class="fields">
                    <div class="field m-mobile-wide m-margin-bottom-small">
                        <div class="ui left icon input">
                            <i class="user icon"></i>
                            <input type="text" name="nickname" placeholder="姓名">
                        </div>
                    </div>
                    <div class="field m-mobile-wide m-margin-bottom-small">
                        <div class="ui left icon input">
                            <i class="mail icon"></i>
                            <input type="text" name="email" placeholder="邮箱">
                        </div>
                    </div>
                    <div class="field m-mobile-wide m-margin-bottom-small">
                        <button type="button" id="comment-btn" class="ui teal button m-mobile-wide"><i
                                class="edit icon"></i> 发布
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="m-right-bottom m-fixed m-padded">
    <div class="ui vertical icon buttons">
        <button type="button" class="ui toc button">目录</button>
        <a href="#comment-container" class="ui button">留言</a>
        <button class="ui icon button"><i class="weixin icon"></i></button>
        <a href="#" class="ui teal button"><i class="chevron up icon"></i></a>
    </div>
</div>

<div class="ui toc-container flowing popup transition hidden" style="width:300px;height: auto;">
    生成的目录
    <ol class="js-toc">

    </ol>
</div>

<div id="qrcode" class="ui weixin flowing popup transition hidden" style="width:130px">
    <!-- <img src="./static/image/myvx.jpg" alt="" class="ui rounded image" style="width:120px"> -->
</div>
<br>
<br>

<!-- 底部 -->
<footer class="ui  m-padded-tb-massive">
    <div class="ui center aligned container">
        <p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright © 2022 By Meteor</p>
        <a href="https://beian.miit.gov.cn"><p>黑ICP备2022004739号-1</p></a>
    </div>

</footer>

<!--script引入-->
<th:block th:replace="_fragments :: script">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
    <script src="../static/lib/prism/prism.js"></script>
    <script src="../static/lib/tocbot/tocbot.min.js"></script>
    <script src="../static/lib/qrcode/qrcode.min.js"></script>
</th:block>

<script th:inline="javascript">
    $(".menu.toggle").click(function () {
        $(".m-item").toggleClass("m-mobile-hide");
    });

    $("#payButton").popup({
        popup: $(".pay.popup"),
        on: 'click',
        position: 'top center',
    });
    tocbot.init({
        // Where to render the table of contents.
        tocSelector: '.js-toc',
        // Where to grab the headings to build the table of contents.
        contentSelector: '.js-toc-content',
        // Which headings to grab inside of the contentSelector element.
        headingSelector: 'h1, h2, h3',
        // For headings inside relative or absolute positioned containers within content.
        hasInnerContainers: true,
    });
    $(".toc.button").popup({
        popup: $(".toc-container.popup"),
        on: 'click',
        position: 'left center',
    });

    $(".weixin").popup({
        popup: $(".weixin.popup"),
        on: 'click',
        position: 'left center',
    });

    var serurl = "http://www.lx-meteor.club"
    var url = /*[[@{/blog/{id}(id=${blog.id})}]]*/"";
    var qrcode = new QRCode("qrcode", {
        text: serurl + url,
        width: 120,
        height: 120,
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
    });

    $('.ui.form').form({
        fields: {
            content: {
                indentifier: 'content',
                rules: [{
                    type: 'empty',
                    prompt: '标题：请输入博客标题',
                }]
            },
            nickname: {
                indentifier: 'nickname',
                rules: [{
                    type: 'empty',
                    prompt: '标题：请输入博客内容',
                }]
            },
        }
    });

    $('#comment-btn').click(function () {
        var boo = $('.ui.form').form('validate form');
        if (boo) {
            postData();
        }
    });

    function postData() {
        $("#comment-container").load(/*[[@{/comments}]]*/"", {
            "blogId": $("[name='blogId']").val(),
            "parentCommentId": $("[name='parentCommentId']").val(),
            "content": $("[name='content']").val(),
            "nickname": $("[name='nickname']").val(),
            "email": $("[name='email']").val(),
        }, function (responseText, statusText, xhr) {
            $(window).scrollTo($('#comment-container'), 500);
            clearContent();
        });
    }

    function clearContent() {
        $("[name='content']").val('');
        $("[name='nickname']").val('');
        $("[name='parentCommentId']").val(-1);
        $("[name='content']").attr("placeholder", "请输入评论信息...");
    }

    function reply(obj) {
        var commentId = $(obj).data('commentid');
        var commentNickname = $(obj).data('commentnickname');
        $("[name='content']").attr("placeholder", "@" + commentNickname).focus();
        $("[name='parentCommentId']").val(commentId);
        $(window).scrollTo($('#comment-form'), 500);
    }

</script>
</body>

</html>